<template>
	<view class="layout">
		<common-title></common-title>
	</view>
	<view class="notice">
		<view class="left">
			<uni-icons type="sound-filled" size="20"></uni-icons>
			<text class="text">公告</text>
		</view>
		<view class="center">
			<text class="tip">仅用于展示基础算法能力(持续优化)</text>
		</view>
	</view>	
	<view class="banner">
		<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay class="b-swiper">
			<swiper-item class="item">
				<image src="http://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/yolo_tracker.png" mode="widthFix"></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="http://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/driveinphone.jpeg" mode="widthFix"></image>
			</swiper-item>	
			<swiper-item class="item">
				<image src="http://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/smoking.jpg" mode="widthFix"></image>
			</swiper-item>	
			<swiper-item class="item">
				<image src="http://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/falling.jpeg" mode="widthFix"></image>
			</swiper-item>	
			<swiper-item class="item">
				<image src="http://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/fire.jpg" mode="widthFix"></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="http://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/fight.jpg" mode="widthFix"></image>
			</swiper-item>	
			<swiper-item class="item">
				<image src="http://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/ev.png" mode="widthFix"></image>
			</swiper-item>	
		</swiper>
	</view>
	<view class="testarea">交互测试</view>
	<view class="content">
		<view class="icon" @click="OnPhoneDet">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/nophone.png" mode="widthFix"></image>
			<text>禁用手机</text>
		</view>
		<view class="icon" @click="OnSmokingDet">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/nosmoking.png" mode="widthFix"></image>
			<text>禁止抽烟</text>
		</view>
		<view class="icon" @click="OnFallingDet">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/person-falling.png" mode="widthFix"></image>
			<text>跌倒检测</text>
		</view>
		<view class="icon" @click="OnFireDet">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/fire.png" mode="widthFix"></image>
			<text>火情报警</text>
		</view>
		<view class="icon" @click="OnFightDet">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/打架斗殴.png" mode="widthFix"></image>
			<text>打架斗欧</text>
		</view>
		<view class="icon" @click="OnEVDet">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/禁止电动车.png" mode="widthFix"></image>
			<text>电车报警</text>
		</view>
		<view class="icon" @click="OnUnmannedplane">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/无人机.png" mode="widthFix"></image>
			<text>无人机</text>
		</view>
		<view class="icon" @click="OnInfraredBoat">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/pro_01_infrared_boat.png" mode="widthFix"></image>
			<text>红外船只</text>
		</view>
		<view class="icon" @click="OnInfraredAerialPhoto">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/航拍59.png" mode="widthFix"></image>
			<text>红外航拍</text>
		</view>
		<view class="icon" @click="OnShipDet">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/可见光船只.png" mode="widthFix"></image>
			<text>船只检测</text>
		</view>
		<view class="icon" @click="OnSleepDet">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/sleeping.png" mode="widthFix"></image>
			<text>睡岗检测</text>
		</view>
		<view class="icon" @click="OnDutyCar">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/巡逻车.png" mode="widthFix"></image>
			<text>巡逻车</text>
		</view>
	</view>
	<view class="testarea">案例演示</view>	
	<view class="Pro_demo">
		<view class="box" @click="OnTracker">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/videos/tracker_demo.gif" mode="widthFix"></image>
			<text>跟踪轨迹</text>
		</view>
		<view class="box" @click="OnDemo_facere">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/videos/facere_demo.gif" mode="widthFix"></image>
			<text>人脸识别</text>
		</view>
	</view>
	<view class="dbcontent">
		<view class="testarea">数据资产</view>
		<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/hotsale.png"></image>
	</view>
	<view class="db_content">
		<view class="icon" @click="DB_00">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro00/preview_000.jpg" mode="widthFix"></image>
			<text>电梯里的电动车</text>
		</view>
		<view class="icon" @click="DB_02">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro02/preview_000.jpg" mode="widthFix"></image>
			<text>红外光航拍人车</text>
		</view>
		<view class="icon" @click="DB_05">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro05/preview_000.jpg" mode="widthFix"></image>
			<text>无人机</text>
		</view>
		<view class="icon" @click="DB_06">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro06/preview_000.jpg" mode="widthFix"></image>
			<text>可见光船舶</text>
		</view>
		<view class="icon" @click="DB_07">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro07/preview_000.jpg" mode="widthFix"></image>
			<text>打电话</text>
		</view>
		<view class="icon" @click="DB_09">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro09/preview_000.jpg" mode="widthFix"></image>
			<text>睡岗趴睡</text>
		</view>
		<view class="icon" @click="DB_11">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro11/preview_000.jpg" mode="widthFix"></image>
			<text>吸烟</text>
		</view>
		<view class="icon" @click="DB_14">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro14/preview_000.jpg" mode="widthFix"></image>
			<text>烟火火情</text>
		</view>
		<view class="icon" @click="DB_15">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro15/preview_000.jpg" mode="widthFix"></image>
			<text>打架暴力</text>
		</view>
		<view class="icon" @click="DB_16">
			<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui2/ui_db/pro16/preview_000.jpg" mode="widthFix"></image>
			<text>跌倒</text>
		</view>
	</view>
</template>

<script setup>
const OnPhoneDet=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_07_phone",
	})		
}
const OnSmokingDet=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_11_smoke",
	})		
}

const OnFallingDet=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_16_fall",
	})	
}
const OnFireDet=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_13_smokefire",
	})
}
const OnFightDet=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_15_violence",
	})
}
const OnEVDet=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_00_electrickcycle",
	})	
}
const OnUnmannedplane=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_10_drone",
	})	
}
const OnInfraredBoat=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_01_infrared_boat",
	})	
}
const OnInfraredAerialPhoto=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_02_infrared_aerial_photo",
	})		
}
const OnShipDet=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_03_ship",
	})	
}
const OnSleepDet=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_09_sleep",
	})		
}
const OnDutyCar=()=>{
	uni.navigateTo({
		url:"/pages/pro_00_electrickcycle/pro_00_electrickcycle?type=pro_04_dutycar",
	})		
}
const OnTracker=()=>{
	uni.navigateTo({
		url:"/pages/fullgif/fullgif?type=tracker",
	})
}
const OnDemo_facere=()=>{
	uni.navigateTo({
		url:"/pages/fullgif/fullgif?type=facere",
	})	
}
const DB_00=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro00",
	})	
}
const DB_02=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro02",
	})	
}
const DB_05=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro05",
	})	
}
const DB_06=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro06",
	})	
}
const DB_07=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro07",
	})	
}
const DB_09=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro09",
	})	
}
const DB_11=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro11",
	})	
}
const DB_14=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro14",
	})	
}
const DB_15=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro15",
	})	
}
const DB_16=()=>{
	uni.navigateTo({
		url:"/pages/dbimgpreview/dbimgpreview?type=pro16",
	})	
}

</script>

<style lang="scss" scoped>
.notice{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background: #f9e6f2;
	margin: 0 auto;
	border-radius: 10rpx;
	display: flex;
	border-radius: 10rpx;
	.left{
		width: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		:deep(){
			.uni-icons{
				color:f2fff8 !important;
			}
		}			
		.text{
			color:#555;
			font-weight: 600;
			font-size: 28rpx;
		}
	}
}
.banner{
	background-color: #f2fff8;
	border-radius: 10rpx;
	.b-swiper{		
		.item{
			image{
				border-radius: 10rpx;
				width:750rpx;
			}
		}
	}
}
.testarea{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:20rpx 10rpx;
    font-size: 18px;
	font-weight: bold;
	background-color: #defffe;
	//border-radius: 12px;
}
.content{
	background-color: #f2fff8;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap:15rpx;
	padding:15rpx;
	.icon{
	  justify-content: center; /* 沿主轴居中对齐 */
	  align-items: center; /* 沿交叉轴居中对齐 */
	image{
		width:100%;
	}
	text{
		white-space: nowrap;
		font-size:14px;
		display:flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #555;
		font-weight:bold;
	}	
	}
}
.db_content{
	background-color: #f2fff8;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap:15rpx;
	padding:15rpx;
	.icon{
	  justify-content: center; /* 沿主轴居中对齐 */
	  align-items: center; /* 沿交叉轴居中对齐 */
	image{
		width:100%;
	}
	text{
		white-space: nowrap;
		font-size:14px;
		display:flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #555;
		font-weight:bold;
	}	
	}
}
.Pro_demo{
	background-color: #f2fff8;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap:15rpx;
	padding:15rpx;
	.box{
	  justify-content: center; /* 沿主轴居中对齐 */
	  align-items: center; /* 沿交叉轴居中对齐 */
	image{
		width:100%;
	}
	text{
		white-space: nowrap;
		font-size:18px;
		display:flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #555;
		font-weight:bold;
	}	
	}
}
.dbcontent{
	background-color: #defffe;
	display: flex;
	justify-content: space-between;
	align-items: center;
	image{
		padding-right: 10rpx;
		width:80rpx;
		height:80rpx;
	}
}
</style>
